<template>
  <div>
    <div class="container">
      <h3 class="top">上传结项申请书：</h3>
      <el-upload
        class="avatar-uploader"
        action=""
        :show-file-list="false"
        :before-upload="beforeUploads"
        :http-request="doPut"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>

    <el-button style="margin-top: 50px" @click="send">确认</el-button>
  </div>
</template>

<script>
  import Utils from "../assets/js/Utils";

  export default {
    name: "CloseProject",
    data() {
      return {
        id: null,
        imageUrl: "",
      }
    },
    methods: {
      beforeUploads(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      doPut(option) {
        let file = option.file
        let OSS = require('ali-oss');
        this.$post({
          url: "sts/sign"
        }).then(res => {
          let ossClient = new OSS({
            region: 'oss-cn-qingdao',
            accessKeyId: res.accessKeyId,
            accessKeySecret: res.accessKeySecret,
            stsToken: res.securityToken,
            bucket: 'lius-1'
          })
          ossClient.put("imgs/" + (new Date()).getTime() + ".jpg", file).then(res => {
            this.imageUrl = res.url
          })
        }).catch(err => {
          console.log(err)
        })
      },
      send() {
        if (this.id == 0) {
          alert("错误")
          return
        }
        if (this.imageUrl == "") {
          alert("请上传证明文件！")
          return
        }
        let _this = this
        this.$post({
          url: "project/admin/close",
          data: {
            id: _this.id,
            url: _this.imageUrl
          }
        }).then(res => {
          alert("成功！")
          this.$router.push({
            path: "project?project_id=" + Utils.GetQueryString("project_id")
          })
        })
      }
    },
    components: {},
    mounted() {
      this.id = Number(Utils.GetQueryString("project_id"))
    }
  }
</script>

<style scoped>
  .avatar-uploader {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-left: 20px;
  }

  .avatar-uploader .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    left: auto;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
    margin-left: -30px;
  }

  .top {
    margin-top: 10px;
  }
</style>
